<template>
  <div class="qn-video-item" @click="selectVideo" :class="{'select': videoChoose && bindClick}">
    <div v-if="videoSrc === ''" class="no-video">
      暂未播放视频
    </div>
    <video-player
      v-else
      class="video-player vjs-custom-skin"
      :options="playerOptions"
      :playsinline="true"
      :id="'playerIndex'+playerIndex"
    >
    </video-player>
  </div>
</template>
<script>
// import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'

//引入hls.js
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
import { returnStatement } from '@babel/types'

export default {
  props: {
    bindClick: {
      type: [Boolean],
      default: false
    },
    playerIndex: {
      type: [Number],
      default: 0
    }
  },
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        live: true,
        autoplay: true,
        muted: this.bindClick, // 静音模式
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        language: 'zh-CN',
        controls: !this.bindClick,
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false, // 全屏按钮
          currentTimeDisplay: false,
          playToggle: false,
          progressControl: false,
          playbackRateMenuButton: true
        },
        sources: [{
          type: 'application/x-mpegURL',
          src: ''
        }],
      },
      videoSrc: '',
      videoChoose: false,
      videoTitle: '',
      videoId: '',
      // _videoPlayer: {}
    }
  },
  watch: {
    bindClick(val) {
      this.$nextTick(() => {
        if (val) {
          this.playerOptions.controls = false
          this.playerOptions.muted = true
        } else {
          this.playerOptions.controls = true
          this.playerOptions.muted = false
        }
      })
    }
  },
  methods: {
    selectVideo() {
      if (this.bindClick) {
        this.videoChoose = !this.videoChoose
        this.$emit('select', this.videoChoose)
      }
    },
    setChoose(val) {
      this.videoChoose = val
    },
    changePlayerBtn(player) {
      // this.addCloseBtn(player)
      // this.addShotBtn(player)
      // this.addVideoTitle(player)
    },
    addCloseBtn(player) {
      const _this = this
      const closeBtn = player.controlBar.addChild('button')
      closeBtn.addClass('el-icon-close')
      closeBtn.addClass('vjs-control')
      closeBtn.addClass('vjs-button')
      closeBtn.addClass('vjs-close-control')
      closeBtn.on('click', () => {
        _this.$emit('closeVideo')
      })
    },
    addShotBtn(player) {
      const _this = this
      const shotBtn = player.controlBar.addChild('button')
      shotBtn.addClass('iconfont')
      shotBtn.addClass('icon-shot')
      shotBtn.addClass('vjs-control')
      shotBtn.addClass('vjs-button')
      shotBtn.addClass('vjs-shot-control')
      shotBtn.on('click', () => {
        _this.$emit('shotVideo', player.currentTime())
      })
    },
    addVideoTitle(player) {
      const _this = this
      const titleDiv = player.controlBar.addChild('button')
      titleDiv.addClass('vjs-video-title')
      videojs.dom.appendContent(titleDiv.el_, _this.videoTitle)
    }
  }
}
</script>

<style lang="scss">
  .qn-video-item {
    video{
      object-fit: fill;
    }
  }
</style>
